<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="ID"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    >
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--    分页-->
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="5"
                :total="50"
                @current-change="page"
        >
        </el-pagination>

    </div>
</template>

<script>
    export default {
        methods: {
            del(row){
                // 删除
                const _this = this
                axios.delete("http://localhost:8800/book/delete/"+row.id).then(function (resp) {
                    //弹窗
                    _this.$alert('<'+row.name+'>删除成功', 'SUCCESS', {
                        confirmButtonText: '确定',
                        callback: action => {
                            // 动态刷新
                           window.location.reload()
                        }
                    })
                })
            },
            edit(row) {
                // 修改
                // console.log(row);
                this.$router.push({
                    path:'/update',
                    query:{
                        id: row.id
                    }
                })
            },
            page(currentPage){
                // 分页
                // alert(currentPage)
                const _this=this
                axios.get('http://localhost:8800/book/find/'+currentPage+'/5').then(function (resp) {
                    // console.log(resp)
                    _this.tableData = resp.data
                })
            }
        },created() {
            const _this = this
            axios.get('http://localhost:8800/book/find/1/5').then(function (resp) {
                // console.log(resp)
                _this.tableData = resp.data
            })
        },
        data() {
            return {
                tableData: null
            }
        }
    }
</script>